<template>
  <div id="app">
    <div class="wrapper">
      <div class="menu">
        <div class="inner">
          <div class="logo">
            <img src="./character.png" alt="">
            <span>里该隐合成表</span>
            <a href="https://space.bilibili.com/1503710" target="_blank">by杠三杠</a></div>
          <div v-for="(tab, index) in tabs" :key="index" class="tab" :class="{'selected': tabValue===tab.tabValue}" @click="tabValue=tab.tabValue">{{tab.tabName}}</div>
        </div>
      </div>

      <!-- 模拟合成 -->
      <div v-if="tabValue==='simulation'" class="block block-simulation">
        <!-- {{simList}} - {{simResult}} -->
        <div class="mat">
          <img v-for="(item2, index2) in imgs" :key="index2" v-show="index2 > 0" :src="item2" @click="clickSim(index2)">
          <el-button type="primary" icon="el-icon-refresh-left" @click="resetSim">重置</el-button>
        </div>
        <div class="board">
          <div class="left">
            <div class="imgWrapper" v-for="(i, index) in simList" :key="index" @click="removeSim(index)">
              <img v-if="i > 0" :src="imgs[i]">
            </div>
          </div>
          <div class="right">
            <div v-if="simResult > 0" class="itemIcon" :style="itemIcon(simResult)"></div>
          </div>
        </div>
        <div class="source">
          参考：<a href="https://github.com/bladecoding/isaac-bagofcrafting" target="_blank">bladecoding/isaac-bagofcrafting</a> @github
        </div>
      </div>

      <!-- 简单查询 -->
      <div v-else-if="tabValue==='simple'" class="block" :style="blockWidth">
        <div class="title">
          <el-input v-model="input" clearable placeholder="输入道具英文名 / ID" @focus="inputFocus" @blur="inputBlur"></el-input>
          <el-button style="margin: 0 10px;" type="primary" icon="el-icon-refresh-left" @click="reset">重置</el-button>
          <el-checkbox v-model="isOnlyFavor">只看收藏</el-checkbox>
        </div>
        <div class="ope">
          <div v-for="(item1, index1) in filter" :key="index1" class="row">
            <span>{{index1+1}}</span>
            <img :class="{'selected': index2===filter[index1]}" :style="matStyle" v-for="(item2, index2) in imgs" :key="index2" :src="item2" @click="clickFilterBtn(index1, index2)">
          </div>
        </div>
        <div class="header">
          <div style="width: 50px"></div>
          <div style="width: 250px">道具图标/名称</div>
          <div style="width: 50px">ID</div>
          <div style="flex: 1">配方</div>
        </div>
        <div class="recipe">
          <div v-for="(item, index1) in pageData(page)" :key="index1" class="row">
            <div class="favor">
              <i v-if="item.favor" class="el-icon-star-on" @click="favorOff(item.ID)"></i>
              <i v-else class="el-icon-star-off" @click="favorOn(item.ID)"></i>
            </div>
            <div class="name">
              <div class="itemIcon" :style="itemIcon(item.ID)"></div>
              <span>{{item.name}}</span>
            </div>
            <div class="id">{{item.ID}}</div>
            <div class="right">
              <div v-for="(list, index2) in item.lists" :key="index2" class="block" :style="matBlockStyle">
                <img :style="matStyle" v-for="(i, index) in list" :key="index" :src="imgs[i]">
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            :current-page.sync="page"
            :total="filtedData.length"
            :page-size="pageSize"
            :page-sizes="[10,25,50,100,1000]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>

      <!-- 全查询 -->
      <div v-else-if="tabValue==='full'" class="block block2">
        <div class="ope2">
          <div v-for="(num, index) in materialNum" :key="index" class="one-material">
            <img :style="matStyle" :src="imgs[index+1]" alt="">
            <el-input-number size="mini" :min="0" :max="99" v-model="materialNum[index]" @change="handleNumberChange" @focus="inputFocus" @blur="inputBlur"></el-input-number>
          </div>
          <el-button type="primary" round icon="el-icon-search" @click="search2">查询</el-button>
          <el-button type="primary" round icon="el-icon-refresh-left" @click="reset2">重置</el-button>
        </div>
        <div class="preview">
          <span v-if="totalMat > 0" style="font-size: 14px;">共{{totalMat}}个材料：</span>
          <img v-for="(img, index) in previewMat" :key="index" :src="imgs[img]" alt="">
        </div>
        <div class="header">
          <div style="width: 250px">道具图标/名称</div>
          <div style="width: 50px">ID</div>
          <div style="flex: 1">配方</div>
        </div>
        <div class="recipe">
          <div v-for="(item, index1) in pageData2(page2)" :key="index1" class="row">
            <div class="name">
              <div class="itemIcon" :style="itemIcon(item.ID)"></div>
              <span>{{item.name}}</span>
            </div>
            <div class="id">{{item.ID}}</div>
            <div class="right">
              <div v-for="(list, index2) in item.lists" :key="index2" class="block" :style="matBlockStyle" @click="removeMat(index1, index2)">
                <img :style="matStyle" v-for="(i, index) in list" :key="index" :src="imgs[i]">
              </div>
            </div>
          </div>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="total, prev, pager, next, sizes"
            :current-page.sync="page2"
            :total="filtedData2.length"
            :page-size="pageSize"
            :page-sizes="[10,25,50,100,1000]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange2">
          </el-pagination>
        </div>
      </div> 

      <!-- 设置 -->
      <div v-else-if="tabValue==='setting'" class="block-setting">
        <el-form label-width="150px" label-position="left">
          <el-form-item label="材料图标尺寸">
            <el-radio v-model="matIconSize" label="20" @change="handleMatIconSizeChange">较小</el-radio>
            <el-radio v-model="matIconSize" label="25" @change="handleMatIconSizeChange">中等</el-radio>
            <el-radio v-model="matIconSize" label="30" @change="handleMatIconSizeChange">较大</el-radio>
            <div class="preview">
              <img :src="imgs[1]" :style="matStyle">
            </div>
          </el-form-item>
        </el-form>
        
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  // 取消el按钮过度动画
  .el-button{
    transition: none;
  }

  .itemIcon{
    width: 32px;
    height: 32px;
    background: url("./all_items.png") no-repeat top left;
    image-rendering: pixelated;
  }

  .wrapper{
    margin: 0 auto;
    padding: 60px 0 70px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    .menu{
      width: 100%;
      height: 60px;
      background-color: white;
      z-index: 10;
      position: fixed;
      top: 0;
      box-shadow: rgba(0,0,0,.2) 0px 0px 5px;
      .inner{
        height: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        .logo{
          display: flex;
          align-items: center;
          margin-right: 40px;
          span{
            margin: 0 10px;
            font-size: 20px;
            font-weight: bold;
          }
          a{
            color: #409eff;
          }
        }
        .tab{
          height: 60px;
          line-height: 60px;
          padding: 0 20px;
          cursor: pointer;
          &:hover{
            color: #409eff;
          }
          &.selected{
            color: #409eff;
            font-weight: bold;
            border-bottom: 3px solid #409eff;
          }
        }
      }
    }
    .block{
      .title{
        width: 100%;
        padding: 25px 0 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-input{
          width: 250px;
        }
      }
      .ope{
        width: 100%;
        margin-bottom: 20px;
        .row{
          margin-bottom: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          span{
            margin-right: 10px;
          }
          img{
            border-radius: 5px;
            border: 2px solid rgba(0,0,0,0);
            cursor: pointer;
            &:hover{
              background-color: #ddd;
            }
            &.selected{
              border: 2px solid black;
              background-color: #bbb;
            }
          }
        }
      }
      .ope2{
        width: 100%;
        padding-top: 20px;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        .one-material{
          margin-right: 10px;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
          img{
            margin-bottom: 5px;
          }
          .el-input-number{
            width: 85px;
            >>> .el-input-number__decrease, >>> .el-input-number__increase{
              width: 24px;
            }
          }
        }
        .el-button{
          height: 40px;
        }
      }
      .preview{
        width: 100%;
        min-height: 20px;
        margin: 10px 0;
        display: flex;
        flex-flow: row wrap;
        img{
          width: 20px;
        }
      }
      .header{
        width: 100%;
        padding: 10px 0;
        background-color: #ccc;
        display: flex;
        div{
          text-align: center;
          font-weight: bold;
        }
      }
      .recipe{
        width: 100%;
        .row{
          width: 100%;
          display: flex;
          &:nth-child(2n){
            background-color: #f0f0f0;
          }
          .favor{
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            i{
              cursor: pointer;
            }
            .el-icon-star-on{
              font-size: 24px;
              font-weight: bold;
              color: #409eff;
            }
            .el-icon-star-off{
              font-size: 20px;
              color: #ccc;
            }
          }
          .name{
            width: 250px;
            display: flex;
            align-items: center;
            .itemIcon{
              margin-right: 10px;
            }
          }
          .id{
            width: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .right{
            flex: 1;
            padding: 0 10px;
            display: flex;
            align-items: center;
            .block{
              margin: 5px;
              padding: 5px;
              border-radius: 5px;
              display: flex;
              flex-flow: row wrap;
              justify-content: center;
              align-content: center;
              transition: background-color 100ms;
              &:hover{
                background-color: #ddd;
              }
            }
          }
        }
      }
      .page{
        width: 100%;
        padding: 20px 0;
        background-color: white;
        box-shadow: rgba(0,0,0,.2) 0px 0px 5px;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: center;
      }
    }
    .block-simulation{
      width: 100%;
      padding: 20px 0;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      .mat{
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 25px;
          height: 25px;
          cursor: pointer;
          border-radius: 5px;
          &:hover{
            background-color: #ddd;
          }
        }
        .el-button{
          margin-left: 10px;
        }
      }
      .board{
        height: 73px;
        margin-bottom: 20px;
        display: flex;
        background-color: #eee;
        .left{
          width: 144px;
          border-top: 1px solid black;
          border-left: 1px solid black;
          display: flex;
          flex-flow: row wrap;
          .imgWrapper{
            width: 35px;
            height: 35px;
            border-bottom: 1px solid black;
            border-right: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            &:hover{
              background-color: #ddd;
            }
            img{
              width: 25px;
              height: 25px;
            }
          }
        }
        .right{
          width: 74px;
          border-top: 1px solid black;
          border-right: 1px solid black;
          border-bottom: 1px solid black;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 40px;
            height: 40px;
          }
        }
      }
      .source{
        font-size: 12px;
        color: #666;
        a{
          color: #409eff;
        }
      }
    }
    .block2{
      width: 940px;
      .itemIcon{
        margin-left: 20px;
      }
      .block{
        cursor: pointer;
      }
    }
    .block-setting{
      padding-top: 20px;
      .el-form-item{
        position: relative;
        .preview{
          width: 40px;
          height: 40px;
          position: absolute;
          top: 0;
          right: -40px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
</style>

<script>
  class Rng{
    seed = 0;
    shift = [0,0,0];

    constructor(seed, shift){
      this.seed = seed;
      this.shift = shift;
    }

    next(){
      let num = this.seed;
      num ^= (num >>> this.shift[0]) & 0xffffffff;
      num ^= (num << this.shift[1]) & 0xffffffff;
      num ^= (num >>> this.shift[2]) & 0xffffffff;
      this.seed = num >>> 0;
      return this.seed;
    }

    nextFloat(){
      const multi = Math.fround(2.3283061589829401E-10);
      return Math.fround(this.next() * multi);
    }
  }

  function isSubStr(arr1, arr2){
    let n1 = 0, n2 = 0;
    while(n1 < arr1.length && n2 < arr2.length){
      if(arr1[n1] < arr2[n2]) break;
      else if(arr1[n1] === arr2[n2]) {
        n1++;
        n2++;
      } else n2++;
    }
    return n1 === arr1.length;
  }

  import data from "./db"
  export default {
    name: "cain",
    mixins: [data],
    data(){
      return{
        tabValue: 'simulation',
        tabs: [
          {
            tabName: "模拟合成",
            tabValue: "simulation", 
          },
          {
            tabName: "简单查询",
            tabValue: "simple", 
          },
          {
            tabName: "全查询",
            tabValue: "full", 
          },
          {
            tabName: "设置",
            tabValue: "setting", 
          },
        ],

        simList: [0,0,0,0,0,0,0,0],

        isInputFocus: false,
        isOnlyFavor: false,
        favorList: [],
        input: "",
        filter: [0,0,0,0,0,0,0,0],
        page: 1,
        pageSize: 10,

        input2: "",
        materialNum: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        page2: 1,
        filtedData2: [],

        matIconSize: '25',
      }
    },
    computed: { 
      matStyle(){
        return {
          'width': this.matIconSize + 'px'
        };
      },
      matBlockStyle(){
        return {
          'width': parseInt(this.matIconSize) * 4 + 'px'
        }
      },
      blockWidth(){
        let width;
        if(this.matIconSize == 30) width = 940;
        else if(this.matIconSize == 25) width = 860;
        else if(this.matIconSize == 20) width = 780;
        return {
          'width': width + 'px'
        };
      },

      imgs(){
        let list = [];
        for(let i = 0; i <= 25; i++)
          list.push(require(`./${i}.png`));
        return list;
      },
      itemIcon(){
        return (_id) => {
          let id = parseInt(_id);
          if(id < 43) id -= 0;
          else if(id < 59) id -= 1;
          else if(id < 61) id -= 2;
          else if(id < 235) id -= 3;
          else if(id < 587) id -= 4;
          else if(id < 613) id -= 5;
          else if(id < 620) id -= 6;
          else if(id < 630) id -= 7;
          else if(id < 648) id -= 8;
          else if(id < 662) id -= 9;
          else if(id < 666) id -= 10;
          else if(id < 718) id -= 11;
          else id -= 12;
          return {backgroundPosition: `${-(id-1)*42}px 0`};
        }
      },

      simResult(){
        if(this.simList.indexOf(0) === -1){
          let rng = new Rng(0x77777770, [0, 0, 0]);
          
          let components = [...this.simList];
          components.sort((x, y) => x - y);

          //硬编码
          if(this.JsIncorrectRecipes[components.toString()]){
            return this.JsIncorrectRecipes[components.toString()];
          }
            
          let compTotalWeight = 0;
          let compCounts = new Array(this.ComponentShifts.length).fill(0);
          for (let compId of components) {
            ++compCounts[compId];
            compTotalWeight += this.ComponentWeights[compId];
            rng.shift = this.ComponentShifts[compId];
            rng.next();
          }
          rng.shift = this.ComponentShifts[6];

          let poolWeights = [
            { idx: 0, weight: 1 },
            { idx: 1, weight: 2 },
            { idx: 2, weight: 2 },
            { idx: 4, weight: compCounts[4] * 10 },
            { idx: 3, weight: compCounts[3] * 10 },
            { idx: 5, weight: compCounts[6] * 5 },
            { idx: 8, weight: compCounts[5] * 10 },
            { idx: 12, weight: compCounts[7] * 10 },
            { idx: 9, weight: compCounts[25] * 10 },
          ];

          if (compCounts[8] + compCounts[1] + compCounts[12] + compCounts[15] == 0)
              poolWeights.push({ idx: 26, weight: compCounts[23] * 10 });

          let totalWeight = 0;
          let itemWeights = new Array(729 + 1).fill(0);

          for (let poolWeight of poolWeights) {
            if (poolWeight.weight <= 0)
              continue;

            let qualityMin = 0;
            let qualityMax = 1;
            let n = compTotalWeight;
            if (poolWeight.idx >= 3 && poolWeight.idx <= 5)
              n -= 5;

            if (n > 34) {
              qualityMin = 4;
              qualityMax = 4;
            } else if (n > 30) {
              qualityMin = 3;
              qualityMax = 4;
            } else if (n > 26) {
              qualityMin = 2;
              qualityMax = 4;
            } else if (n > 22) {
              qualityMin = 1;
              qualityMax = 4;
            } else if (n > 18) {
              qualityMin = 1;
              qualityMax = 3;
            } else if (n > 14) {
              qualityMin = 1;
              qualityMax = 2;
            } else if (n > 8) {
              qualityMin = 0;
              qualityMax = 2;
            }

            let pool = this.itempools[poolWeight.idx];
            for (let item of pool.children) {
              var quality = parseInt(this.itemQualities[item.Id]);
              if (quality < qualityMin)
                  continue;
              if (quality > qualityMax)
                  continue;

              var w = Math.fround(parseFloat(item.Weight) * poolWeight.weight);
              itemWeights[item.Id] = Math.fround(itemWeights[item.Id] + w);
              totalWeight = Math.fround(totalWeight + w);
            }
          }

          if (totalWeight <= 0)
              return 25;

          let target = Math.fround(rng.nextFloat() * totalWeight);
          for (let i = 0; i < itemWeights.length; i++) {
              if (target < itemWeights[i])
                  return i;
              target = Math.fround(target - itemWeights[i]);
          }
          return 25;
        }
        return 0;
      },
      maxPage(){
        return Math.ceil(this.filtedData.length / this.pageSize);
      },
      maxPage2(){
        return Math.ceil(this.filtedData2.length / this.pageSize);
      },
      namedData(){
        if(this.isOnlyFavor)
          return this.data.filter(i => i.favor).filter(i => i.name.toLowerCase().indexOf(this.input.toLowerCase()) > -1 || i.ID == this.input);
        else
          return this.data.filter(i => i.name.toLowerCase().indexOf(this.input.toLowerCase()) > -1 || i.ID == this.input);
      },
      filtedData(){
        let ans = [], lists, temp = [...this.filter].filter(i => i > 0);
        temp.sort((x, y) => x - y);

        for(let i in this.namedData){
          lists = [];
          if(isSubStr(temp, this.namedData[i].list1)) lists.push(this.namedData[i].list1);
          if(isSubStr(temp, this.namedData[i].list2)) lists.push(this.namedData[i].list2);
          if(isSubStr(temp, this.namedData[i].list3)) lists.push(this.namedData[i].list3);
          if(isSubStr(temp, this.namedData[i].list4)) lists.push(this.namedData[i].list4);

          if(lists.length > 0){
            ans.push({
              favor: this.namedData[i].favor,
              icon: this.namedData[i].icon,
              name: this.namedData[i].name,
              ID: this.namedData[i].ID,
              lists: lists
            });
          }
        }
        return ans;
      },
      pageData(){
        return (page) => {
          let startIndex = (page - 1) * this.pageSize;
          let endIndex = startIndex + this.pageSize;
          let ans = [];
          for(let i = startIndex; i < endIndex && i < this.filtedData.length; i++)
            ans.push(this.filtedData[i]);
          return ans;
        }
      },
      previewMat(){
        let ans = [];
        for(let index in this.materialNum){
          for(let i = 0; i < this.materialNum[index]; i++){
            ans.push(parseInt(index) + 1);
          }
        }
        return ans;
      },
      totalMat(){
        let num = 0;
        this.materialNum.forEach(n => {
          num += n;
        });
        return num;
      },
      pageData2(){
        return (page) => {
          let startIndex = (page - 1) * this.pageSize;
          let endIndex = startIndex + this.pageSize;
          let ans = [];
          for(let i = startIndex; i < endIndex && i < this.filtedData2.length; i++)
            ans.push(this.filtedData2[i]);
          return ans;
        }
      },
    },
    created(){
      //读取pageSize
      if(localStorage.getItem("pageSize")){
        this.pageSize = parseInt(localStorage.getItem("pageSize"));
      } else {
        localStorage.setItem("pageSize", 10);
      }

      //读取matIconSize
      if(localStorage.getItem("matIconSize")){
        this.matIconSize = localStorage.getItem("matIconSize");
      } else {
        localStorage.setItem("matIconSize", '30');
      }

      //读取favor
      if(localStorage.getItem("favor")){
        this.favorList = JSON.parse(localStorage.getItem("favor"));
      }
      this.data = this.data.map(i => {
        i.favor = this.favorList.indexOf(i.ID) > -1;
        return i;
      });
    },
    mounted(){
      //键盘左右翻页
      document.onkeydown = (event) => {
        if(this.isInputFocus) return;
        if(event.keyCode === 37 || event.keyCode === 65){
          if(this.tabValue === "simple"){
            if(this.page > 1) this.page--;
          } else if(this.tabValue === "full"){
            if(this.page2 > 1) this.page2--;
          }
        } else if(event.keyCode === 39 || event.keyCode === 68){
          if(this.tabValue === "simple"){
            if(this.page < this.maxPage) this.page++;
          } else if(this.tabValue === "full"){
            if(this.page2 < this.maxPage2) this.page2++;
          }
        }
      }
    },
    methods: {
      toTop(h = 0){
        document.body.scrollTop = h;
        document.documentElement.scrollTop = h;
      },
      inputFocus(){
        this.isInputFocus = true;
      },
      inputBlur(){
        this.isInputFocus = false;
      },
      resetSim(){
        for(let i = 0; i < 8; i++){
          this.$set(this.simList, i, 0);
        }
      },
      clickSim(i){
        let index = this.simList.indexOf(0);
        if(index > -1) {
          //有空位，置入队末
          this.$set(this.simList, index, i);
        } else {
          //没有空位，去头再置入
          this.simList.splice(0, 1);
          this.simList.push(i);
        }
      },
      removeSim(index){
        if(this.simList[index] > 0){
          this.simList.splice(index, 1);
          this.simList.push(0);
        }
      },
      reset(){
        this.input = "";
        for(let i = 0; i < 8; i++){
          this.$set(this.filter, i, 0);
        }
      },
      saveFavor(){
        localStorage.setItem("favor", JSON.stringify(this.favorList));
      },
      favorOff(id){
        for(let i = 0; i < this.data.length; i++){
          if(this.data[i].ID == id){
            let temp = this.data[i];
            temp.favor = false;
            this.$set(this.data, i, temp);
            break;
          }
        }

        let index = this.favorList.indexOf(id);
        if(index > -1)
          this.favorList.splice(index, 1);
        this.saveFavor();
      },
      favorOn(id){
        for(let i = 0; i < this.data.length; i++){
          if(this.data[i].ID == id){
            let temp = this.data[i];
            temp.favor = true;
            this.$set(this.data, i, temp);
            break;
          }
        }

        this.favorList.push(id);
        this.favorList.sort((x,y) => x-y);
        this.saveFavor();
      },
      reset2(){
        this.input2 = "";
        for(let i in this.materialNum){
          this.$set(this.materialNum, i, 0);
        }
        this.search2();
      },
      search2(){
        this.filtedData2 = [];
        let mat = [...this.previewMat], lists;
        for(let i in this.data){
          lists = [];
          if(isSubStr(this.data[i].list1, mat)) lists.push(this.data[i].list1);
          if(isSubStr(this.data[i].list2, mat)) lists.push(this.data[i].list2);
          if(isSubStr(this.data[i].list3, mat)) lists.push(this.data[i].list3);
          if(isSubStr(this.data[i].list4, mat)) lists.push(this.data[i].list4);
          if(lists.length > 0){
            this.filtedData2.push({
              icon: this.data[i].icon,
              name: this.data[i].name,
              ID: this.data[i].ID,
              lists: lists
            });
          }
        }
      },
      clickFilterBtn(index1, index2){
        this.$set(this.filter, index1, index2);
      },
      removeMat(index1, index2){
        let list = this.pageData2(this.page2)[index1].lists[index2];
        for(let i of list){
          this.$set(this.materialNum, i-1, this.materialNum[i-1]-1);
        }
        this.search2();
      },
      handleNumberChange(v, ov){
        //清空下面列表
        this.filtedData2 = [];
      },
      handleSizeChange(pageSize){
        this.pageSize = pageSize;
        localStorage.setItem("pageSize", pageSize);
        this.page = 1;
        this.page2 = 1;
      },
      handleCurrentChange(page){
        this.page = page;
        // this.toTop(400);
      },
      handleCurrentChange2(page){
        this.page2 = page;
        // this.toTop(400);
      },
      handleMatIconSizeChange(size){
        localStorage.setItem("matIconSize", size);
      },
    }
  }
</script>
